<template>
	<view class="detail-view">
		<view class="top-bar">
			<uni-navbar :fixed="true" :back="true" color="#fff" title="内容详情"></uni-navbar>
		</view>


		<view class="praceView">
			<view class="praceViewTitle">
				{{ issueInfo.title }}
			</view>
		
			<view class="praceViewTime">
				{{ issueInfo.submitTime }}
			</view>
		</view>
		
		<view class="infoView">
			{{ issueInfo.contact }}
		</view>
		
		<view class="gksjview">
			{{ msIssueOpen.openStart && msIssueOpen.openEnd ? '公开时间：' + msIssueOpen.openStart + '至' + msIssueOpen.openEnd : '暂无' }}
		</view>
		


		<u-gap height="20" bgColor="#F6F7FB"></u-gap>
		
		<view class="typeList">
			<view class="typeListItem  ismar" @tap="intap(0)" :class="typeCurrent == 0 ? 'an' : 'un'">
				评论({{plNum}})
			</view>
			
			<view class="typeListItem " @tap="intap(1)" :class="typeCurrent == 1 ? 'an' : 'un'">
				点赞({{dzNum}})
			</view>
		</view>
		
		<view class="listDzList" v-if="typeCurrent == 0">
			<view class="zz" v-for="item of plList">
				<view class="listDzListItem">
					<view class="listDzListItemLeft">
						<image src="@/pagesB/static/avatar.png" mode=""></image>
					</view>
					<view class="listDzListItemCenter">
						<view class="listDzListItemCenterTop">
							{{ item.name }}
						</view>
						<view class="listDzListItemCenterCenter2">
							{{ item.content }}
						</view> 
					</view>
					<!-- <view class="listDzListItemRight">
						删除
					</view> -->
				</view>
		
				<view class="listDzListItemText">
					{{ item.createTime }}
				</view>
			</view>
		
		</view>



		<view class="listDzList" v-if="typeCurrent == 1">
			<view class="listDzListItem" v-for="item of dzList">
				<view class="listDzListItemLeft">
					<image src="@/pagesB/static/avatar.png" mode=""></image>
				</view>
				<view class="listDzListItemCenter">
					<view class="listDzListItemCenterTop">
						{{ item.name }}
					</view>
					<view class="listDzListItemCenterCenter">
						{{ item.createTime }}
					</view>
				</view>
				<view class="listDzListItemRight">
					<image src="@/pagesB/static/dmg.png" mode=""></image>
				</view>
			</view>
		</view>
		


	</view>
</template>

<script>
	import uniParse from '@/components/uni-parse/parse.vue';
	import {
		mapState
	} from 'vuex';
	export default {
		components: {
			uniParse
		},
		data() {
			return {
				plNum:0,
				dzNum:0,
				plList:[],
				dzList:[],
				type:'',
				typeCurrent:0,
				dzList:[],
				id: '',
				fileList_Info: [],
				issueAudit: {},
				issueInfo: {},
				msIssueCmt: [],
				msIssueConsult: {},
				msIssueDisclosure: {},
				msIssueLike: [],
				msIssueOpen: {},
				msIssueSurvey: {},
				clientCode: '',
				userId: '',
				isno:false,
				pageQuery:{
					pageNum:1,
					pageSize:'20'
				}
			};
		},
		onLoad(option) {
			if (option.id) {
				this.id = option.id
				this.getD()
				
				if(option.type){
					// 1码上议事 2马上公开
					this.type = option.type
					this.getdianzan()
					this.getpinglun()
				}
				
			}
		},
		onPullDownRefresh() {
			// this.pageQuery.pageNum = '1'
			// this.isno = false
			// this.getdianzan()
			// this.getpinglun()
		},
		onReachBottom() {
			if(this.typeCurrent == 0){
				this.getAllpinglun()
				
			}
			
			if(this.typeCurrent == 1){
				this.getAlldianzan()
			}
			
		},
		onHide() {},
		onUnload() {},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			intap(e){
				this.typeCurrent = e
				this.pageQuery.pageNum = 1
				
				if(e == 0){
					this.getdianzan()
				}
				
				if(e == 1){
					this.getpinglun()
				}
			},
			getdianzan(){
				// 1码上议事 2马上公开
				let that = this
				let url = '/msIssueInfo/getCmtList';
				this.$request(url, {
					isMuFlag:'1',
					issueId: that.id,
					currentUserId: that.userInfo.sysUser.id,
					type:'1',
					isNode:that.type == '1' ? 'msly' : 'msgk',
					pageNum:that.pageQuery.pageNum,
					pageSize:that.pageQuery.pageSize,
				}, {
					load: false
				}).then((res) => {
					if(res.code == 200){
						that.dzList = res.data.records
						this.dzNum = res.data.total
						that.$forceUpdate()
					}
				});
			},
			getAlldianzan(){
				let that = this
				let url = '/msIssueInfo/getCmtList';
				
				let aaaa = JSON.parse(JSON.stringify(that.pageQuery))
				aaaa.pageNum++
				this.$request(url, {
					isMuFlag:'1',
					issueId: that.id,
					currentUserId: that.userInfo.sysUser.id,
					type:'1',
					isNode:that.type == '1' ? 'msly' : 'msgk',
					pageNum:aaaa.pageNum,
					pageSize:aaaa.pageSize,
				}, {
					load: false
				}).then((res) => {
					if(res.code == 200){
						if(res.data.records && res.data.records.length !== 0){
							that.dzList.push(...res.data.records)
							that.pageQuery.pageNum++
						}
						
						that.$forceUpdate()
					}
				});
			},
			getpinglun(){
				// 1码上议事 2马上公开
				let that = this
				let url = '/msIssueInfo/getCmtList';
				this.$request(url, {
					isMuFlag:'1',
					issueId: that.id,
					currentUserId: that.userInfo.sysUser.id,
					type:'2',
					isNode:that.type == '1' ? 'msly' : 'msgk',
					pageNum:that.pageQuery.pageNum,
					pageSize:that.pageQuery.pageSize,
				}, {
					load: false
				}).then((res) => {
					if(res.code == 200){
						that.plList = res.data.records
						this.plNum = res.data.total
						that.$forceUpdate()
					}
				});
			},
			getAllpinglun(){
				// 1码上议事 2马上公开
				let that = this
				let url = '/msIssueInfo/getCmtList';
				
				let aaaa = JSON.parse(JSON.stringify(that.pageQuery))
				aaaa.pageNum++
				this.$request(url, {
					isMuFlag:'1',
					issueId: that.id,
					currentUserId: that.userInfo.sysUser.id,
					type:'2',
					isNode:that.type == '1' ? 'msly' : 'msgk',
					pageNum:aaaa.pageNum,
					pageSize:aaaa.pageSize,
				}, {
					load: false
				}).then((res) => {
					if(res.code == 200){
						
						if(res.data.records && res.data.records.length !== 0){
							that.plList.push(...res.data.records)
							that.pageQuery.pageNum++
						}
						
						that.$forceUpdate()
					}
				});
			},
			getDZ() {
				let that = this
				let url = '/msIssueInfo/snumList';
				this.$request(url, {
					type: '',
					issueId: that.id
				}, {
					load: true
				}).then((res) => {
					if(res.code == 200){
						this.dzList = res.data.likeRecords
					}
				});
			},
			getAllDZ() {
				let that = this
				let url = '/msIssueInfo/snumList';
				this.$request(url, {
					type: '',
					issueId: that.id
				}, {
					load: true
				}).then((res) => {
					if(res.code == 200){
						if(res.data.likeRecords && res.data.likeRecords.length !== 0){
							that.dzList.push(...res.data.likeRecords)
						}else{
							that.isno = true
						}
						
					}
				});
			},
			getD() {
				let that = this
				let url = '/msIssueInfo/queryAll';
				this.$request(url, {
					id: that.id,
					clientCode: "370782"
				}, {
					load: true
				}).then((res) => {
					this.fileList_Info = res.data.fileList_Info
					this.issueAudit = res.data.issueAudit
					this.issueInfo = res.data.issueInfo
					this.msIssueCmt = res.data.msIssueCmt
					this.msIssueConsult = res.data.msIssueConsult
					this.msIssueDisclosure = res.data.msIssueDisclosure
					this.msIssueLike = res.data.msIssueLike
					this.msIssueOpen = res.data.msIssueOpen
					this.msIssueSurvey = res.data.msIssueSurvey
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.detail-view {
		min-height: 100vh;
		background-color: #fff;
	}

	.praceView {
		.praceViewTitle {
			padding: 40upx 38upx;
			font-size: 24px;
			color: #333333;
			font-weight: bold;
		}

		.praceViewTime {
			padding: 0upx 38upx 10upx 38upx;
			color: #999999;
			font-size: 14px;
		}
	}

	.intitle {
		height: 100upx;
		line-height: 100upx;
		padding: 0 40upx;
		color: #333333;
		font-size: 17px;
		font-weight: bold;
	}

	.textA {
		padding: 0 40upx;
		font-size: 17px;
		color: #333333;
		word-break: break-word;
	}

	.fileList2 {
		padding: 0 40upx;
		background-color: #F6F7FB;

		.fileList2Item {
			display: flex;
			align-items: center;
			height: 100upx;
			padding: 10upx 0;

			.fileList2ItemLeft {
				flex: 1;
				text-align: left;
				padding: 0 10upx 0 0;

				image {
					width: 44upx;
					height: 52upx;
				}
			}

			.fileList2ItemCenter {
				padding: 0 0 0 0;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				flex: 7;
				font-size: 15px;
				color: #333333;
			}

			.fileList2ItemRight {
				flex: 1;
				text-align: right;

				image {
					width: 32upx;
					height: 32upx;
					position: relative;
					left: 30upx;
				}
			}
		}

		.fileListItemAudio {
			display: flex;
			align-items: center;
			width: 120upx;
			height: 60upx;
			background-color: #0077FF;

			.fileListItemAudioLeft {
				flex: 1;

				.fileListItemAudioLeftImg {
					width: 24upx;
					height: 24upx;
				}
			}
		}
	}


	.formView {
		.formViewItem {
			display: flex;
			align-items: center;
			height: 120upx;
			padding: 0 40upx;
			border-bottom: 1upx solid #F6F7FB;

			.formViewItemLeft {
				flex: 1;
				text-align: left;
				color: #999999;
				font-size: 17px;
			}

			.formViewItemRight {
				flex: 1.5;
				text-align: right;
				color: #333333;
				font-size: 17px;
			}
		}

		.textA {
			padding: 0 40upx;
			font-size: 17px;
			color: #333333;
			word-break: break-word;
		}
	}
	
	.listDzList{
		.listDzListItem{
			display: flex;
			align-items: center;
			padding: 20upx;
			border-bottom: 1upx solid #f5f7fa;
			.listDzListItemLeft{
				flex: 1;
				
				padding-left: 15upx;
				image{
					width: 52.5upx;
					height: 52.5upx;
				}
			}
			
			.listDzListItemCenter{
				flex: 7;
				.listDzListItemCenterTop{
					color: #AD8E77;
					font-size: 14px;
				}
				.listDzListItemCenterCenter{
					font-size: 12px;
					color: #999999;
				}
				
				.listDzListItemCenterCenter2{
					color: #333333;
					padding-top: 10upx;
					font-size: 16px;
				}
			}
			
			.listDzListItemRight{
				flex: 1;
				font-size: 14px;
				color: #999999;
				image{
					width: 36upx;
					height: 32upx;
				}
			}
	
		}
		
		.listDzListItemText{
			padding: 0upx 0 20upx 110upx;
			font-size: 12px;
			color: #999999;
		}
	}
	
	.gksjview{
		font-size: 15px;
		color: #999999;
		line-height: 120upx;
		padding: 0 40upx;
	}
	
	.infoView{
		color: #333333;
		font-size: 17px;
		padding: 20upx 40upx 50upx 40upx;
		border-bottom: 1upx solid #F6F7FB;
		border-top: 1upx solid #F6F7FB;
	}
	
	
	.typeList{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20upx;
		.typeListItem{
			width: 314upx;
			height: 72upx;
			line-height: 72upx;
			text-align: center;
			
		}
		
		.un{
			background-color: #F6F7FB;
			font-size: 28upx;
			color: #333333;
			border-radius: 50upx;
			border: 1upx solid #F6F7FB;
		}
		
		.an{
			background-color: #FCEFF1;
			font-size: 28upx;
			color: #D0021B;
			border: 1upx solid #D0021B;
			border-radius: 50upx;
		}
		
		.ismar{
			margin-right: 20upx;
		}
	}
</style>
